<style lang="scss">
    @import '~@/abstracts/_variables.scss';
    div#cafe-map {
        width: 100%;
        height: 500px;
    }
    
    div.cafe-info-window {
        div.cafe-name {
            display: block;
            text-align: center;
            color: $dark-color;
            font-family: 'Josefin Sans', sans-serif;
        }
        div.cafe-address {
            display: block;
            text-align: center;
            margin-top: 5px;
            color: $grey;
            font-family: 'Lato', sans-serif;
            span.street {
                font-size: 14px;
                display: block;
            }
            /* span.city {
                font-size: 12px;
            }
            span.state {
                font-size: 12px;
            } */
            span.zip {
                font-size: 12px;
                display: block;
            }
            a {
                color: $secondary-color;
                font-weight: bold;
            }
        }
    }
</style>

<template>
  <div id="cafe-map">
  </div>
</template>

<script>
    import {
        ROAST_CONFIG
    } from '../../config.js';
    export default {
        props: {
            'latitude': { // 经度
                type: Number,
                default: function() {
                    return 40.040074
                }
            },
            'longitude': { // 纬度
                type: Number,
                default: function() {
                    return 116.273519
                }
            },
            'zoom': { // 缩放级别,zooms:[3,20]
                type: Number,
                default: function() {
                    return 20
                }
            }
        },
        data() {
            return {
                center: new TMap.LatLng(39.984104, 116.307503), //设置中心点坐标
                map: {}
            }
        },
        mounted() {
            //初始化地图
            this.map = new TMap.Map("cafe-map", {
                center: this.center
            });

            // 清除并重构点标记
            this.clearMarkers();
            this.buildMarkers();
        },
        computed: {
            cafes() {
                return this.$store.getters.getCafes;
            },
        },
        methods: {
            buildMarkers() {

                // 自定义点标记图标
                var image = ROAST_CONFIG.APP_URL + '/storage/img/coffee-marker.png';
                // 遍历所有创建点标记
                console.log(this.cafes);
                for (var i = 0; i < this.cafes.length; i++) {
                    //位置
                    let position_al = new TMap.LatLng(this.cafes[i].latitude, this.cafes[i].longitude);

                    //获取当前客户端location
                    if (i == 0) {
                        this.center = new TMap.LatLng(this.cafes[i].latitude, this.cafes[i].longitude);
                        this.map.setCenter(this.center);
                    }
                    //初始marker
                    var marker = new TMap.MultiMarker({
                        map: this.map,
                        styles: {
                            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                            "myStyle": new TMap.MarkerStyle({
                                "width": 25, // 点标记样式宽度（像素）
                                "height": 35, // 点标记样式高度（像素）
                                "src": image, //图片路径
                                //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                                "anchor": {
                                    x: 16,
                                    y: 32
                                }
                            })
                        },
                        geometries: [{
                            "id": i, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                            "styleId": 'myStyle', //指定样式id
                            "position": position_al, //点标记坐标位置
                            "properties": { //自定义属性
                                "title": "marker1"
                            }
                        }]
                    });
                    // 自定义信息窗体
                    let contentString = '<div class="cafe-info-window">' +
                        '<div class="cafe-name">' + this.cafes[i].name + '</div>' +
                        '<div class="cafe-address">' +
                        '<span class="street">' + this.cafes[i].address + '</span>' +
                        '<span class="zip">' + this.cafes[i].zip + '</span>' +
                        '<a href="/#/cafes/' + this.cafes[i].id + '">详情</a>' +
                        '</div>' +
                        '</div>';


                    //infoWindow
                    var infoWindow = new TMap.InfoWindow({
                        map: this.map,
                        position: position_al,
                        offset: {
                            x: 0,
                            y: -32
                        }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
                        content: contentString
                    });

                    if (i != 0) infoWindow.close(); //初始关闭信息窗关闭
                    //监听标注点击事件
                    marker.on("click", function(evt) {
                        infoWindow.open(); //打开信息窗
                        infoWindow.setPosition(evt.geometry.position); //设置信息窗位置
                        infoWindow.setContent(contentString); //设置信息窗内容
                        // infoWindow.setContent(evt.geometry.position.toString()); //设置信息窗内容
                    })
                }


            },
            clearMarkers() {}

        },
        //一旦有更新，立即清除地图上的所有点标记并重新绘制：
        watch: {
            cafes() {
                this.clearMarkers();
                this.buildMarkers();
            }
        }
    }
</script>